<template>
	<view>
		<!-- <uni-collapse @change="change">
		            <uni-collapse-item title="标题文字">
		                <uni-list>
		                    <uni-list-item title="标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png"></uni-list-item>
		                    <uni-list-item title="标题文字" note="描述信息" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"></uni-list-item>
		                    <uni-list-item title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
		                </uni-list>
		            </uni-collapse-item>
		            <uni-collapse-item title="默认开启" open="true">
		                <view style="padding: 30upx;"> 折叠内容主体，可自定义内容及样式 </view>
		            </uni-collapse-item>
		            <uni-collapse-item title="禁用状态" disabled="true">
		                <view style="padding: 30upx;"> 禁用状态 </view>
		            </uni-collapse-item>
		        </uni-collapse> -->
		<!-- <uni-collapse>
				    <uni-collapse-item title="标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png">
				        <view style="padding: 30rpx;">
				            
				        </view>
				    </uni-collapse-item>
				    <uni-collapse-item title="标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png">
				        <view style="padding: 30rpx;">
				            折叠内容主体，可自定义内容及样式
				        </view>
				    </uni-collapse-item>
				</uni-collapse> -->

		<!-- <uni-collapse accordion="true" style="display: inline-block;width: 30%;">
			<uni-collapse-item title="风险四色图">
				<view style=" width: 300%;">
					<view v-for="(item,index) in navBanner2" :key="index" @click="previewImage(index)">
						<view class=" margin-t30 margin-l30 align-center" style="border-bottom:  solid 3px #000000;">
							<image :src="item.file_url" class="">
							</image>
						</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<uni-collapse accordion="true" style="display: inline-block; width: 30%;">
			<uni-collapse-item title="企业平面图" style="display: inline-block;">
				<view style="padding: 30rpx;">
					<image src="/static/add.png" mode=""></image>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<uni-collapse accordion="true" style="display: inline-block; width: 30%;">
			<uni-collapse-item title="作业比较柱状图" style="display: inline-block;">
				<view style="padding: 30rpx;">
					<image src="/static/add.png" mode="center"></image>
				</view>
			</uni-collapse-item>
		</uni-collapse> -->
		<image src="/static/images/work1.jpg" mode="" class="img_bg"></image>
		<view  class="margin-l20 text-32" :class="button_number==1?'button_2':'button_1'" style="width: 31%; border-right: solid 1upx #D3D3D3 ;" @click="click1()">风险四色图</view>
		<view  class="text-32" :class="button_number==2?'button_2':'button_1'" style="display: inline-block;width: 31%; border-right: solid 1upx #D3D3D3 ;"@click="click2()">企业平面图</view>
		<view  class="text-32" :class="button_number==3?'button_2':'button_1'" style="display: inline-block;width: 33%;"@click="click3()">作业柱状图</view>
		<view v-for="(item,index) in navBanner2" :key="index" @click="previewImage1(index)" v-show="button_number==1">
			<view class=" margin-t30 margin-l30 margin-r30  align-center" style="border-bottom:  solid 3px #000000;">
				<view class=""style="margin-left: 45%;color: #FFFFFF;">
					{{item.filename}}
				</view>
				<image :src="item.file_url" class="margin-t10 margin-b10" style="margin-left: 8%; margin-right: 8%;width: 82%;">
				</image>
			</view>
		</view>
		<view v-for="(item,index) in navBanner3_1" :key="index" @click="previewImage2(index)" v-show="button_number==2">
			<view class=" margin-t30 margin-l30 margin-r30 align-center" style="border-bottom:  solid 3px #000000;">
				<view class="" style="margin-left: 45%;color: #FFFFFF;">
					{{item.filename}}
				</view>
				<image :src="item.file_url" class="margin-t10 margin-b10" style="margin-left: 8%; margin-right: 8%;width: 82%;">
				</image>
			</view>
		</view>
		<view v-for="(item,index) in navBanner4_1" :key="index" @click="previewImage3(index)" v-show="button_number==3">
			
			<view class=" margin-t30 margin-l30 margin-r30 align-center" style="border-bottom:  solid 3px #000000;">
				<view class=""style="margin-left: 45%; color: #FFFFFF;">
					{{item.filename}}
				</view>
				<image :src="item.file_url" class="margin-t10 margin-b10" style="margin-left: 8%; margin-right: 8%;width: 82%;">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				uid: '',
				token: '',
				button_number:1,
				navBanner1: [],
				navBanner2: [],
				navBanner3: [],
				navBanner3_1:[],
				navBanner4: [],
				navBanner4_1:[],
			}
		},
		onLoad: function() {
			this.token = uni.getStorageSync('user').token
			this.uid = uni.getStorageSync('user').uid
			this.getMap()
		},
		methods: {
			previewImage1: function(index) {
				var b = this.navBanner1

				var c = index
				var i = this.navBanner1
				console.log(i)
				uni.previewImage({
					current: index,
					urls: i,
					success: function(res) {
						console.log(res)
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			previewImage2: function(index) {
				var i = this.navBanner3
				console.log(i)
				uni.previewImage({
					current: index,
					urls: i,
					success: function(res) {
						console.log(res)
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			previewImage3: function(index) {
				var i = this.navBanner4
				console.log(i)
				uni.previewImage({
					current: index,
					urls: i,
					success: function(res) {
						console.log(res)
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			getMap: function() {
				let that = this
				uni.request({
					url: 'https://aqmore.sxpz.vip/AppApi/CompanyImg/index?uid=' + this.uid + '&token=' + this.token,
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						console.log(res)
						that.navBanner2 = res.data.datas.list1.list
						that.navBanner1 = res.data.datas.list1.img_arr
						
						that.navBanner3_1 = res.data.datas.list2.list
						that.navBanner3 = res.data.datas.list2.img_arr
						
						that.navBanner4_1 = res.data.datas.list3.list
						that.navBanner4 = res.data.datas.list3.img_arr
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			click1(){
				this.button_number=1
			},
			click2(){
				this.button_number=2
				
			},
			click3(){
				this.button_number=3
			}
		}
	}
</script>

<style>
	.button_1{
		color: #F0AD4E;
		display: inline-block; 
		height: 80upx;
		border-radius: 3%;
		text-align: center;
		padding-top: 23upx;
		border-bottom: solid 3upx #F0AD4E;
		
	}
	.button_2{
		color: #4CD964;
		display: inline-block;
		height: 80upx;
		border-radius: 3%;
		text-align: center;
		padding-top: 23upx;
		border-bottom: solid 3upx #4CD964;
	}
</style>
